<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        #div1{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            padding: 0 auto;
            background-color: black;
        }
        #div2{
            margin: 0 auto;
            padding: 0 auto;
            background-color: aqua;
            position: relative;
            top: 50px;
        }
        #div3{
            margin: 0 auto;
            padding: 0 auto;
            background-color: green;
            position: relative;
            top: 50px;
        }
        #div4{
            margin: 0 auto;
            padding: 0 auto;
            background-color: red;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1" >
        <h5>WoW</h5>
        <div id="div2" style="width: 400px;height: 400px;">
            <a href="http://www.baidu.com">去百度</a>
            <div id="div3" style="width: 300px;height: 300px;">
                <input type="image" src="" >
                <div id="div4" style="width: 100px;height: 100px;">
                <p id="tagP" style="font-size: 16px; text-align: center;">帅</p>
                </div>
            </div>
        </div>
    </div>

    <button type="button" onclick="getParentNode()">tag父级</button>
    <button type="button" onclick="getParentNode()">tag父元素</button>
</body>
<!-- 4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（） -->
<script>
    function getParentNode(){
        var pNode = document.getElementById('tagP');
        console.log(pNode.parentNode.parentNode.parentNode.parentNode.parentNode);
    }
    function getParentElement(){
        var pNode = document.getElementById('tagP');
        console.log(pNode.parentElement.parentElement.parentElement.parentElement);
    }
</script>
</html>